<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>发布订阅模式</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>

<script>

    // 发布订阅模式事件中心类
    class PublishSubscribe{
        constructor(){
            this.subs = {} // Object.create(null)
        }
        // 订阅
        addSub(eventType, handler) {
            this.subs[eventType] = this.subs[eventType] || []
            this.subs[eventType].push(handler)
        }
        // 发布
        notify(eventType){
            if(this.subs[eventType]){
                this.subs[eventType].forEach(handler => {
                    handler()
                })
            }
        }
    }

    // 发布订阅模式使用示例
    // 1、vm 为事件中心实例对象
    let vm = new PublishSubscribe()

    // 2、订阅消息（在订阅者中调用，例如某个组件1中）
    vm.addSub("click",()=>{
        console.log("click1")
    })

    vm.addSub("click",()=>{
        console.log("click2")
    })

    vm.addSub("change",()=>{
        console.log("change1")
    })

    // 3、发布消息（在发布者中调用，例如某个组件2中）
    vm.notify("click")
    vm.notify("change")



</script>
<body>
    
</body>
</html>